<template>
    <div class="confirmOrder">
        <!-- 头部 -->
        <div class="confirmOrder-header">
            <div class="header-content">
                <p>
                    <i class="el-icon-s-order"></i>
                </p>
                <p>确认订单</p>
                <router-link to></router-link>
            </div>
        </div>
        <!-- 头部END -->

        <!-- 主要内容容器 -->
        <div class="content">
            <!-- 选择地址 -->
            <div class="section-address">
                <p class="title">收货地址</p>
                <div class="address-body">
                    <ul>
                        <li v-for="(item,index) in addressList"
                            :key="index"
                            @click="selectAddress(item.id, index)"
                            :class="{selectAddressColor: selectAddressIndex===index}"
                        >
                            <!--删除-->
                            <el-popover placement="top"
                                        style="width: 100%;
                                        display: inline-block;
                                        text-align: right;">
                                <p>确定删除吗？</p>
                                <div style="text-align: right; margin: 10px 0 0">
                                    <el-button type="primary" size="mini" @click="delUserAddress(item.id)">确定</el-button>
                                </div>
                                <i class="el-icon-close delete" slot="reference"></i>
                            </el-popover>
                            <h2>{{userInfo.username}}</h2>
                            <p class="phone">{{item.telephone}}</p>
                            <p class="address">地址:{{item.province + item.city + item.country + item.detail}}</p>
                        </li>
                        <li class="add-address">
                            <i class="el-icon-circle-plus-outline" @click="dialogVisible = true"></i>
                            <p>添加新地址</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 选择地址END -->

            <!--添加地址弹出框-->
            <el-dialog
                    title="添加地址"
                    :visible.sync="dialogVisible"
                    :before-close="handleClose"
                    width="30%"
                    >
                <el-form status-icon ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="province" style="margin-bottom: 20px;">
                        <el-input type="text" v-model="province" prefix-icon="el-icon-user-solid" placeholder="请输入省份名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="city" style="margin-bottom: 20px;">
                        <el-input type="text" v-model="city" prefix-icon="el-icon-user-solid" placeholder="请输入城市名称"></el-input>
                        <span style="color: red;">{{cityErrorInfo}}</span>
                    </el-form-item>
                    <el-form-item prop="country" style="margin-bottom: 20px;">
                        <el-input type="text" v-model="country" prefix-icon="el-icon-user-solid" placeholder="请输入县城名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="detail" style="margin-bottom: 0px;">
                        <el-input type="text" v-model="detail" prefix-icon="el-icon-user-solid" placeholder="请输入详细地址(包括小区门牌号等)"></el-input>
                        <span style="color: red">{{detailErrorInfo}}</span>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                   <el-button type="primary" @click="addUserAddress">添加地址</el-button>
                </span>
            </el-dialog>


            <!-- 商品及优惠券 -->
            <div class="section-goods">
                <p class="title">商品及优惠券</p>
                <div class="goods-list">
                    <ul v-for="(item,index) in productList" :key="index">
                        <li>
                            <img :src="item.head_img_url" :alt="item.name"/>
                            <span class="pro-name">{{item.name}}</span>
                            <span class="pro-price">{{item.price}}元 x {{item.num}}</span>
                            <span class="pro-status"></span>
                            <span class="pro-total">小计:{{item.price * item.num}}元</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 商品及优惠券END -->

            <!-- 配送方式 -->
            <div class="section-shipment">
                <p class="title">配送方式</p>
                <p class="shipment">包邮</p>
            </div>
            <!-- 配送方式END -->

            <!-- 发票 -->
            <div class="section-invoice">
                <p class="title">发票</p>
                <p class="invoice">电子发票</p>
                <p class="invoice">个人</p>
                <p class="invoice">商品明细</p>
            </div>
            <!-- 发票END -->

            <!-- 结算列表 -->
            <div class="section-count">
                <div class="money-box">
                    <ul>
                        <li>
                            <span class="title">商品件数：</span>
                            <span class="value">{{$store.state.cartSelectProductNum}}件</span>
                        </li>
                        <li>
                            <span class="title">商品总价：</span>
                            <span class="value">{{$store.state.productTotalPrice}}元</span>
                        </li>
                        <li>
                            <span class="title">活动优惠：</span>
                            <span class="value">-0元</span>
                        </li>
                        <li>
                            <span class="title">优惠券抵扣：</span>
                            <span class="value">-0元</span>
                        </li>
                        <li>
                            <span class="title">运费：</span>
                            <span class="value">0元</span>
                        </li>
                        <li class="total">
                            <span class="title">应付总额：</span>
                            <span class="value">
                <span class="total-price">{{$store.state.productTotalPrice}}</span>元
              </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 结算列表END -->

            <!-- 结算导航 -->
            <div class="section-bar">
                <div class="btn">
                    <router-link to="/cart" class="btn-base btn-return">返回购物车</router-link>
                    <a href="javascript:void(0);" @click="addOrder" class="btn-base btn-primary">结算</a>
                </div>
            </div>
            <!-- 结算导航END -->
        </div>
        <!-- 主要内容容器END -->
    </div>
</template>
<script>
    export default {
        name: "",
        data() {
            return {
                userInfo: {}, // 用户信息
                addressList: [], // 地址列表
                productList: [], //商品列表
                dialogVisible: false, // 是否显示添加地址弹出框
                province: "", // 省
                city: "", // 市
                country: "", //县
                detail: "", // 详细地址
                cityErrorInfo: "", //城市错误提示
                detailErrorInfo: "", // 详细错误提示
                selectAddressID: null, // 确认订单,选择的地址id
                selectAddressIndex: 0, // 选择的地址index
            };
        },
        methods: {
            // 初始化用户信息
            initUserInfo() {
                let json_userInfo = localStorage.getItem('userInfo');
                let userInfo = JSON.parse(json_userInfo);
                if (json_userInfo == null) {
                    // 没有登录
                    this.notify('没有登录','用户未登录');
                }
                else {
                    this.userInfo = userInfo;
                    this.getUserAddressList();
                }
            },
            // 获取用户的收货地址
            getUserAddressList() {
                this.$axios({
                    method: 'get',
                    url: this.baseUrl + '/api/v1/order/confirmOrder',
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    }
                }).then(response => {
                    if (response.status == 200) {
                        let result = response.data.data;
                        if (result.userAddress.length != 0) {
                            // 用户的第一个地址id
                            let userFirstAddressID = result.userAddress[0]['id'];
                            this.selectAddressID = userFirstAddressID;
                        }
                        this.addressList = result.userAddress;
                        this.productList = result.userProducts;
                    }
                }).catch(error => {
                    console.log(error.response)
                })
            },
            // 选择地址
            selectAddress(address_id, index) {
                this.selectAddressID = address_id;
                this.selectAddressIndex = index;
            },
            // 添加订单
            addOrder() {
                // 地址id不能为空
                if (this.selectAddressID == null) {
                    window.alert('未选择用户地址!');
                    return false;
                }
                this.$axios({
                    method: 'post',
                    url: this.baseUrl + '/api/v1/order/add',
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    },
                    data: {
                        'total_price': this.$store.state.productTotalPrice,
                        'pay_type': 1,
                        'logistics': '顺丰快递',
                        'address_id': this.selectAddressID
                    }
                }).then(response => {
                    let result = response.data;
                    // 处理支付成功购物车还显示购买之前的商品个数
                    let cartProductNum = this.$store.state.cartProductNum;
                    let cartSelectProductNum = this.$store.state.cartSelectProductNum;
                    let newCartProductNum = cartProductNum - cartSelectProductNum;
                    // 提交vuex商品总数个数
                    this.$store.commit('setCartProductNum', newCartProductNum);
                    if (result.status == 200) {
                        this.notify('支付成功', '交易成功!');
                        // 跳转到订单列表
                        this.$router.replace('/orderList');
                    }

                }).catch(error => {
                    console.log(error.response)
                })
            },
            // 添加新地址
            addUserAddress() {
                if (this.city == "" || this.city.length == 0) {
                    this.cityErrorInfo = "城市不能为空!";
                    console.log(this.cityErrorInfo)
                    return false;
                }
                if (this.detail == "" || this.detail.length == 0) {
                    this.detailErrorInfo = "详细地址不能为空";
                    return false;
                }
                this.$axios({
                    method: 'post',
                    url: this.baseUrl + '/api/v1/address/add',
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    },
                    data: {
                        province: this.province,
                        city: this.city,
                        country: this.country,
                        detail: this.detail
                    }
                }).then(response => {
                    if (response.status == 201) {
                        this.notify(response.data.message, response.data.message);
                        this.dialogVisible = false;
                        this.cityErrorInfo = "";
                        this.detailErrorInfo = "";
                        this.getUserAddressList(); // 刷新地址
                    }

                }).catch(error => {
                    console.log(error.response)
                })
            },
            // 删除用户地址
            delUserAddress(address_id) {
                this.$axios({
                    method: 'get',
                    url: this.baseUrl + '/api/v1/address/del/' + address_id,
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    }
                }).then(response => {
                    if (response.status == 203) {
                        this.notify(response.data.message,response.data.message)
                        this.getUserAddressList()
                    }
                }).catch(error => {
                    console.log(error.response)
                })
            },
            // 对话框关闭事件
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        this.cityErrorInfo = "";
                        this.detailErrorInfo = "";
                    })
                    .catch(_ => {});
            },
            // 提示信息 title string 标题 message string 提示信息
            notify(title, message) {
                const h = this.$createElement;
                this.$notify({
                    title: title,
                    message: h('i', {style: 'color: teal'}, message)
                });
            },
        },
        activated() {
            this.initUserInfo();
        }
    };
</script>
<style scoped>
    .selectAddressColor {
        border: 1px solid red !important;
    }

    .confirmOrder {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }
    /* 头部CSS */
    .confirmOrder .confirmOrder-header {
        background-color: #fff;
        border-bottom: 2px solid #ff6700;
        margin-bottom: 20px;
    }
    .confirmOrder .confirmOrder-header .header-content {
        width: 1225px;
        margin: 0 auto;
        height: 80px;
    }
    .confirmOrder .confirmOrder-header .header-content p {
        float: left;
        font-size: 28px;
        line-height: 80px;
        color: #424242;
        margin-right: 20px;
    }
    .confirmOrder .confirmOrder-header .header-content p i {
        font-size: 45px;
        color: #ff6700;
        line-height: 80px;
    }
    /* 头部CSS END */

    /* 主要内容容器CSS */
    .confirmOrder .content {
        width: 1225px;
        margin: 0 auto;
        padding: 48px 0 0;
        background-color: #fff;
    }

    /* 选择地址CSS */
    .confirmOrder .content .section-address {
        margin: 0 48px;
        overflow: hidden;
    }
    .confirmOrder .content .section-address .title {
        color: #333;
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    .confirmOrder .content .address-body li {
        float: left;
        color: #333;
        width: 220px;
        height: 178px;
        border: 1px solid #e0e0e0;
        padding: 15px 24px 0;
        margin-right: 17px;
        margin-bottom: 24px;
    }
    .confirmOrder .content .address-body .in-section {
        border: 1px solid #ff6700;
    }
    .confirmOrder .content .address-body li h2 {
        font-size: 18px;
        font-weight: normal;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .confirmOrder .content .address-body li p {
        font-size: 14px;
        color: #757575;
    }
    .confirmOrder .content .address-body li .address {
        padding: 10px 0;
        max-width: 180px;
        max-height: 88px;
        line-height: 22px;
        overflow: hidden;
    }
    .confirmOrder .content .address-body .add-address {
        text-align: center;
        line-height: 30px;
    }
    .confirmOrder .content .address-body .add-address i {
        font-size: 30px;
        padding-top: 50px;
        text-align: center;
    }
    /* 选择地址CSS END */

    /* 商品及优惠券CSS */
    .confirmOrder .content .section-goods {
        margin: 0 48px;
    }
    .confirmOrder .content .section-goods p.title {
        color: #333;
        font-size: 18px;
        line-height: 40px;
    }
    .confirmOrder .content .section-goods .goods-list {
        padding: 5px 0;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }
    .confirmOrder .content .section-goods .goods-list li {
        padding: 10px 0;
        color: #424242;
        overflow: hidden;
    }
    .confirmOrder .content .section-goods .goods-list li img {
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    .confirmOrder .content .section-goods .goods-list li .pro-name {
        float: left;
        width: 650px;
        line-height: 30px;
    }
    .confirmOrder .content .section-goods .goods-list li .pro-price {
        float: left;
        width: 150px;
        text-align: center;
        line-height: 30px;
    }
    .confirmOrder .content .section-goods .goods-list li .pro-status {
        float: left;
        width: 99px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .confirmOrder .content .section-goods .goods-list li .pro-total {
        float: left;
        width: 190px;
        text-align: center;
        color: #ff6700;
        line-height: 30px;
    }
    /* 商品及优惠券CSS END */

    /* 配送方式CSS */
    .confirmOrder .content .section-shipment {
        margin: 0 48px;
        padding: 25px 0;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
    }
    .confirmOrder .content .section-shipment .title {
        float: left;
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
    }
    .confirmOrder .content .section-shipment .shipment {
        float: left;
        line-height: 38px;
        font-size: 14px;
        color: #ff6700;
    }
    /* 配送方式CSS END */

    /* 发票CSS */
    .confirmOrder .content .section-invoice {
        margin: 0 48px;
        padding: 25px 0;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
    }
    .confirmOrder .content .section-invoice .title {
        float: left;
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
    }
    .confirmOrder .content .section-invoice .invoice {
        float: left;
        line-height: 38px;
        font-size: 14px;
        margin-right: 20px;
        color: #ff6700;
    }
    /* 发票CSS END */

    /* 结算列表CSS */
    .confirmOrder .content .section-count {
        margin: 0 48px;
        padding: 20px 0;
        overflow: hidden;
    }
    .confirmOrder .content .section-count .money-box {
        float: right;
        text-align: right;
    }
    .confirmOrder .content .section-count .money-box .title {
        float: left;
        width: 126px;
        height: 30px;
        display: block;
        line-height: 30px;
        color: #757575;
    }
    .confirmOrder .content .section-count .money-box .value {
        float: left;
        min-width: 105px;
        height: 30px;
        display: block;
        line-height: 30px;
        color: #ff6700;
    }
    .confirmOrder .content .section-count .money-box .total .title {
        padding-top: 15px;
    }
    .confirmOrder .content .section-count .money-box .total .value {
        padding-top: 10px;
    }
    .confirmOrder .content .section-count .money-box .total-price {
        font-size: 30px;
    }
    /* 结算列表CSS END */

    /* 结算导航CSS */
    .confirmOrder .content .section-bar {
        padding: 20px 48px;
        border-top: 2px solid #f5f5f5;
        overflow: hidden;
    }
    .confirmOrder .content .section-bar .btn {
        float: right;
    }
    .confirmOrder .content .section-bar .btn .btn-base {
        float: left;
        margin-left: 30px;
        width: 158px;
        height: 38px;
        border: 1px solid #b0b0b0;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
    }
    .confirmOrder .content .section-bar .btn .btn-return {
        color: rgba(0, 0, 0, 0.27);
        border-color: rgba(0, 0, 0, 0.27);
    }
    .confirmOrder .content .section-bar .btn .btn-primary {
        background: #ff6700;
        border-color: #ff6700;
        color: #fff;
    }
    /* 结算导航CSS */

    /* 主要内容容器CSS END */
</style>
